<template>
  <div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:content="v">
        <span v-if="v.key == 'change_type'" class="text-label" :style="{background:statusColor[v.row[v.key]]}">
          {{getMatchingData(v.row[v.key],'change_type')}}
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: '',
  components: {},
  props: {
    activeName: {
      type: String,
      default: '',
    },
    DetailedItemNo: {
      type: String,
      default: '',
    },
  },
  data() {
    // 异动日志
    return {
      query: {
        page: 1,
        size: 10,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        fixed: false,
        hideOperations: true,
      },
      baseUrl: this.$api.baseUrl,
      columns: [
        { title: '异动单号', key: 'change_order' },
        { title: '异动类型', key: 'change_type' },
        { title: '备件编号', key: 'serial_number' },
        { title: '备件料号', key: 'item_no' },
        { title: '备件位置', key: 'place' },
        { title: '异动时间', key: 'date' },
        { title: '异动数量', key: 'qty' },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user' },
        { title: '最后修改时间', key: 'modify_time' },
      ],
      statusData: [
        { label: '采购入库', value: 0 },
        { label: '退回入库', value: 1 },
        { label: '出库', value: 2 },
        { label: '报废', value: 3 },
      ],
      statusColor: ['#67c23a', '#732e7e', '#e6a23c', '#f56c6c'],
    }
  },
  computed: {},
  watch: {
    activeName: {
      immediate: true,
      handler(val, old) {
        if (val == 'changeLog') {
          this.getPartDetailList(this.DetailedItemNo)
        }
      },
    },
    DetailedItemNo: {
      immediate: true,
      handler(val, old) {
        if (this.activeName == 'changeLog') {
          this.getPartDetailList(this.DetailedItemNo)
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    getMatchingData(val, code) {
      if (code == 'change_type') {
        let tmp = this.statusData.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
    getPartDetailList(val) {
      let Data = {
        item_no: val,
        page: this.query.page,
        size: this.query.size,
      }
      this.$request(this.baseUrl + 'Tpm/TpmPartAccount/GetPartChangeLoglList', Data, 'post').then((r) => {
        const { list, total } = r
        this.total = total
        this.list = list
      })
    },
  },
}
</script>

<style lang="less" scoped></style>